<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>根据数据智能选择不同的组件</title>
</head>

<body>
    <div id="app">
        <!-- <div>
            <video src = './res/vedios/movie.ogg' controls = 'controls'></video>
        </div> -->
        <smart-item :data="data"></smart-item>
        <button @click='changeItem("vedio")'>切换视频组件</button>
        <button @click='changeItem("img")'>切换图片组件</button>
        <button @click='changeItem("text")'>切换文本组件</button>
    </div>
    <script src="./utils/vue.js"></script>

    <script>
        /*
        一、视频组件、图片和文本组件是如何定义的？
        每个组件只负责自己关心的内容；

        textItem = {type: 'text', content:'我是文本组件。'};
        imgItem = {type: 'img', url: './res/imgs/sheLocker.jpg'};
        vedioItem = {type: 'vedio', url: './res/vedios/movie.ogg', controls: 'controls'};

        二、为什么视频组件和图片组件都不会显示？
        createElement function 的子节点 VNodes参数是String | Array;
        */
        var vedioItem = {
            render: function (createElement) {
                // 子节点（VNodes），可选 (String | Array)
                // Ctrl + /: toggle line comment
                return createElement('div',[createElement('video',{attrs:{src:this.data.url,controls:this.data.controls}},'your browser does not support the video tag')]);
                // return createElement('video',{attrs:{src:this.data.url,controls:this.data.controls}},'your browser does not support the video tag');
            },
            props: {
                data: {
                    type: Object,
                    required: true,
                    // 如果是数组或者是对象，那么得用函数返回。
                    default: function () {
                        return {};
                    }
                }
            }
        };

        var imgItem = {
            render: function (createElement) {
                return createElement('div',[createElement('img',{attrs:{src:this.data.url}})]);
            },
            props: {
                data: {
                    type: Object,
                    required: true,
                    // 如果是数组或者是对象，那么得用函数返回。
                    default: function () {
                        return {};
                    }
                }
            }
        };

        var textItem = {
            render: function (createElement) {
                // console.log('执行文本Render函数。');
                return createElement('div', this.data.content === undefined ? '文本' : this.data.content);
            },
            // props: {
            //     data: {
            //         type: Object,
            //         required: true,
            //         // 如果是数组或者是对象，那么得用函数返回。
            //         default: function () {
            //             return {};
            //         }
            //     }
            // }

            // props 的数组写法：用于外部向组件内部传递数据参数
            props: ['data']
        };

        Vue.component('smart-item', {
            //函数组件
            functional: true,
            render: function (createElement, context){
                var getComponet = function (){
                    let type = context.props.data.type;
                    if(type == 'vedio'){
                        return vedioItem;
                    }else if (type == 'img'){
                        return imgItem;
                    }else{
                        return textItem;
                    }
                };
                return createElement(getComponet(),{props:{data:context.props.data}});
            },
            // props Object的写法；
            props: {
                data: {
                    type: Object,
                    required: true,
                    // 如果是数组或者是对象，那么得用函数返回。
                    default: function () {
                        return {};
                    }
                }
            }
        });

        var app = new Vue({
            el: '#app',
            data: {
                data: {}
            },
            methods: {
                changeItem: function (type) {
                    switch(type){
                        case 'vedio':this.data = {type: 'vedio', url: './res/vedios/movie.ogg', controls: 'controls'};break;
                        case 'img':this.data = {type:'img',url:'./res/imgs/sheLocker.jpg'};break;
                        case 'text':this.data = {type:'text',content:'我是文本组件。'};break;
                        default:break;
                    }
                }
            },
            created: function () {
                this.changeItem('text');
            }
        });
    </script>
</body>

</html>